<%-- 
    Document   : viewAlbum
    Created on : Oct 30, 2012, 4:40:37 PM
    Author     : tinvukhac
--%>
<%@page import="Objects.Image"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="Objects.Album" %>
<%@page import="Ultility.Ultility" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>My Photos</title>
        <link rel="stylesheet" type="text/css" href="<%= request.getContextPath()%>/css/styles.css"/>
        <script type="text/javascript" src="<%= request.getContextPath()%>/js/jquery-1.7.min.js"></script>
        <script type="text/javascript" src="<%= request.getContextPath()%>/js/expandsetting.js"></script>
    </head>

    <body>
        <!-----------------------HEADER------------------------------------------------->
        <div id="top">
            <div id="account-bar">
                <div class="setting space">
                    <a class="bgspace" href="#">
                        <img src="<%= request.getContextPath()%>/images/setting.png" />
                    </a>
                </div>
                <% String thumbnailProfileFileName=(String)request.getAttribute("thumbnailProfileFileName");%> 
                                                
                <div class="icon space">
                    <a class="bgspace" ">
                        <% if(thumbnailProfileFileName==null){%>
                                                 <img width="26" height="26" src="<%=  request.getContextPath() %>/profile/getThumb.htm?getthumb=defaultAvatar.jpg&size=26" />
                                                 <%} else{ 
                                                    String path=request.getContextPath() + "/profile/getThumb.htm?getthumb="+thumbnailProfileFileName+"&size=26";%>
                                                 %>
                                                 <img width="26" height="26" src="<%=  path %>" />
                                                   <%}%>
<!--                        <img src="<%= request.getContextPath()%>/images/icon.png"/>-->
                    </a>
                </div>
                <a class="userName">${userName}</a>
            </div>
                    <div class="expand-setting">
	    <div class="expand-sub">
		<div class="expand-hover">
                    <a href="<%= request.getContextPath() %>/profile/profile.htm">Account Settings</a>
       	        </div>
            <div class="clear"></div>
        <div class="clear line" style="margin:5px 0;"></div>
       	<div class="expand-hover">
            <a href="<%= request.getContextPath() %>/login/logoutAction.htm">Log out</a>
        </div>
	</div>
        </div>
            <div class="clear"></div>

            <div class="banner" style="background:url(<%= request.getContextPath()%>/images/bg00.png) repeat-x left">
                <div class="logo">
                    <img src="<%= request.getContextPath()%>/images/logo1.png" />
                </div>
                <div class="top-tab">
                    <div class="top-tab-active">
                        <div class="top-tab-txt">
                            <a href="<%= request.getContextPath()%>/myphoto/myPhoto.htm"> My Photos</a>
                        </div>
                    </div>
                </div>
                <div class="top-tab">
                    <div class="top-tab-inactive">
                        <div class="top-tab-txt">
                            <a href="<%= request.getContextPath()%>/Explore.html"> Explore</a>
                        </div>
                    </div>
                </div>

                <div class="upload">
                    <a href="<%= request.getContextPath()%>/upload/startupload.html">Upload</a>
                </div>

                <div class="search">
                    <div class="search-form">
                        <form id="search-form" method="get" action="/lh/view" name="search-form">
                            <input id="search" type="text" value="" maxlength="128" size="25" name="q">
                                <input class="search-button" type="submit" value="Search">
                                    </form>
                                    </div>
                                    </div>

                                    </div>
                                    </div>
                                    <!-----------------------CONTENT------------------------------------------------->
                                    <div id="content">
                                        <div id="left">
                                            <div class="context-box">                                              
                                                <img src="<%= request.getContextPath()%>/images/tbnRecent.png">                                                                      
                                                <a class="text-view" href="<%= request.getContextPath()%>/myphoto/myPhoto.htm">My Photos</a>
                                                <span class="separator">></span>
                                                <% String albumName=(String)request.getAttribute("albumName"); %>
                                                <span style="font-family:Arial, Helvetica, sans-serif; font-size:14px;"><%= albumName %></span>
                                            </div>

                                            <table>

                                                <%
                                                    List imageList = new ArrayList();
                                                    imageList = (List) request.getAttribute("imageList");
                                                    Image tempImage;
                                                    for (int i = 0; i < imageList.size(); i++) {
                                                        tempImage = (Image) imageList.get(i);
                                                %>
                                                <% if (i % 5 == 0) {%> <tr> <div class="row"> <%                                                        }%>
                                                        <td>

                                                            <div class="item">
                                                                <div class="thumb">
                                                                    <a href="<%= request.getContextPath() + "/myphoto/viewImage.htm?albumId=" + tempImage.getAlbumId() + "&imageIndex=" + i %>">
                                                                        <img width="130" height="130" src="<%= request.getContextPath() + tempImage.getLink() %>" alt=""/>
                                                                    </a>
                                                                </div>
<!--                                                                <div class="info">
                                                                    <p class="album-cover-title">
                                                                        <a class="album-cover-link" href="<%= request.getContextPath() + "/myphoto/viewImage.htm?albumId=" + tempImage.getAlbumId() + "&imageIndex=" + i %>"><%= tempImage.getImageName() %></a>
                                                                    </p>
                                                             
                                                                </div>-->
                                                            </div>
                                                        </td>
                                                    <% if (i % 5 == 4) {%> </tr><%                                                        }%>         
                                                    <%}
                                                    %>
                                                     <% if(imageList.size()%5 != 0) { %> </tr> <% }
                                                     %>           
                                            </table>
                                            <div class="clear"></div>

                                        </div>
                                    </div>

                                    <div id="right">
                                        <div class="contact">
                                            <div class="avatar" >
                                                <% if(thumbnailProfileFileName==null){%>
                                                 <img width="32" height="32" src="<%=  request.getContextPath() %>/profile/getThumb.htm?getthumb=defaultAvatar.jpg&size=32" />
                                                 <%} else{ 
                                                    String path=request.getContextPath() + "/profile/getThumb.htm?getthumb="+thumbnailProfileFileName+"&size=32";%>
                                                 %>
                                                 <img width="32" height="32" src="<%=  path %>" />
                                                   <%}%>
                                            </div>
                                            <div class="name">
                                                <a href="request.getContextPath()%>/myphoto/myPhoto.htm">${userName}</a>
                                                <br />
                                                <a href="request.getContextPath()%>/myphoto/myPhoto.htm"> Photos</a>
                                            </div>
                                                <br/>
                                                <table>
                                                    <tbody>
                                                        <tr>
                                                            <td> <% Album album=(Album)request.getAttribute("album"); 
                                                                    String link=album.getThumbnail();
                                                                    if(link==null){%>
                                                                        <img width="64" height="64" src="<%=  request.getContextPath() %>/profile/getThumb.htm?getthumb=defaultAvatar.jpg&size=64" />
                                                                    <%} else{  
                                                                        Ultility ultility=new Ultility();
                                                                        String fileName=ultility.getFileName(link);
                                                                        String path=request.getContextPath() + "/profile/getThumb.htm?getthumb="+fileName+"&size=64";%>
                                                                        <img width="64" height="64" src="<%= path %>" />
                                                                    <%}%>
                                                            </td>
                                                            <td>
                                                                Name:<%= albumName %>
                                                                <br/>
                                                                Created date:<%= album.getDateCreate() %>
                                                                <br/>
                                                                Photos:${numberOfImagesInAlbum}
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
<!--                                            <div class="context-box-right">
                                                <div>
                                                    <span> Recent comment </span>
                                                    <span><a href="#">View All</a></span>
                                                </div>
                                                <div>
                                                    <span> People in my photos </span>
                                                    <span><a href="#">View All</a></span>
                                                </div>
                                            </div>-->

                                        </div>
                                    </div>
                                    </div>

                                    <div id="footer">
                                        <p id="copyright"> Powered by 4nSE, SE K53, Hanoi University of Science and Techonogy.</p>
                                    </div>

                                    </body>
                                    </html>